<style>
    #root {
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .15);
        overflow: hidden;
        animation: show .3s;
    }

    @keyframes show {
        from {
            transform: translateY(30px);
            opacity: 0;
        }

        to {}
    }

    .title[data=table-title] {
        width: 100%;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        color: #333;
        font-size: 14px;
        background-color: #F5F5F5;
        position: relative;
    }

    .title[data=table-title] .add {
        position: absolute;
        right: 10px;
        top: 4px;
    }

    .search[data=table-search] {
        width: 100%;
        height: 60px;
        padding: 10px 0;
    }

    .search[data=table-search] .block {
        width: 300px;
        height: 100%;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 20px;
    }

    .search[data=table-search] .block span {
        width: 100px;
        display: inline-block;
        text-align: right;
        box-sizing: border-box;
        padding-right: 10px;
        font-size: 16px;
    }

    .table[data=table-content] {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
    }

    .footer {
        width: 100%;
        box-sizing: border-box;
        padding: 0 20px;
        padding-bottom: 20px;
        text-align: right;
    }
</style>

<body>
    <div id="root">
        <div class="title" data="table-title">
            量表组合列表
            <el-button class="add" @click="handleToAdd" size="small" type="primary"
                icon="el-icon-circle-plus-outline">添加组合</el-button>
        </div>
        <div class="search" data="table-search">
            <div class="block">
                <span>组合名称</span>
                <el-input v-model="search.name" size="small" placeholder="请填写组合名称" />
            </div>
            <el-button type="primary" icon="el-icon-search" size="small" clearable @click="handleSearch">查询</el-button>
            <el-button type="warning" icon="el-icon-circle-close" size="small" clearable
                @click="handleClear">清空</el-button>
        </div>
        <div class="table" size="small" v-loading="table.loading" data="table-content">
            <el-table :data="table.data" size="mini" border>
                <el-table-column align="center" prop="No" width="80" label="序号">
                </el-table-column>
                <el-table-column align="center" width="150" prop="tag" label="组合编号">
                </el-table-column>
                <el-table-column align="center" prop="scheduleName" label="组合名称">
                </el-table-column>
                <el-table-column align="center" prop="tip" label="组合说明">
                </el-table-column>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column align="center" prop="doctorName" label="创建人">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleToEdit(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleToDetail(scope.row)">查看</el-button>
                        <el-button type="text" @click="handleToRemove(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination background @current-change="handleChangeCurrent" layout="prev, pager, next, total"
                :total="table.total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    require(['bbcare'], function ($bb) {

        var URL = $bb.baseUrl("scaleHost")
        if (location.href.indexOf('192.168.3.141') > -1) {
            URL = '/nirn/'
        }

        var vm = new Vue({
            el: '#root',
            data: function () {
                return {
                    search: {
                        name: '',
                    },
                    table: {
                        current: 1,
                        size: 10,
                        total: 0,
                        data: [],
                        loading: false,
                    }
                }
            },
            created: function () {
                this.getScaleList()
                this.cleanSessionStorage()
            },
            methods: {
                /**
                 * 搜索
                 */
                handleSearch: function () {
                    this.getScaleList()
                },
                /**
                 * 清空
                 */
                handleClear: function () {
                    this.search.name = ''
                    this.getScaleList()
                },
                /**
                 * 改变页码
                 */
                handleChangeCurrent: function (val) {
                    this.table.current = val
                    this.getScaleList()
                },
                /**
                 * 添加
                 */
                handleToAdd: function () {
                    sessionStorage.setItem('composeScale', JSON.stringify({
                        type: 'create'
                    }))
                    $bb.openPage('scaleComposeDetail')
                },
                /**
                 * 修改
                 */
                handleToEdit: function (row) {
                    sessionStorage.setItem('composeScale', JSON.stringify({
                        type: 'edit',
                        data: row
                    }))
                    $bb.openPage('scaleComposeDetail')
                },
                /**
                 * 详情
                 */
                handleToDetail: function (row) {
                    sessionStorage.setItem('composeScale', JSON.stringify({
                        type: 'preview',
                        data: row
                    }))
                    $bb.openPage('scaleComposeDetail')
                },
                /**
                 * 删除
                 */
                handleToRemove: function (row) {
                    var that = this
                    this.$confirm('确认要删除此量表组合吗？', '提示', {
                        confirmButtonText: '确认删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(function () {
                            $bb.ajax({
                                url: URL + 'web/scale/schedule/delete',
                                data: JSON.stringify([row.id]),
                                success: function (res) {
                                    if (res.code == 500) location.href = location.href
                                    if (res.code !== 0) return that.$message.error('提交失败,请联系管理员')
                                    that.$message.success('删除成功！')
                                    that.table.current = 1
                                    that.table.scheduleName = ''
                                    that.getScaleList()
                                }
                            })
                        })
                        .catch(function () { })
                },
                /**
                 * 获取量表组合
                 */
                getScaleList: function () {
                    this.table.loading = true
                    var that = this
                    $bb.ajax({
                        url: URL + 'web/scale/schedule/list',
                        data: JSON.stringify({
                            page: this.table.current,
                            limit: this.table.size,
                            scheduleName: this.search.name
                        }),
                        success: function (res) {
                            if (res.code == 500) location.href = location.href
                            that.table.loading = false
                            that.table.total = res.page.total
                            res.page.records.forEach(function (item, index) {
                                item.No = (that.table.current - 1) * that.table.size + index + 1
                            })
                            that.table.data = res.page.records
                        }
                    })
                },
                /**
                 * 清除掉 SessionStorage 的内容
                 */
                cleanSessionStorage: function () {
                    sessionStorage.getItem('composeScale') && sessionStorage.removeItem('composeScale')
                }
            }
        })
    })
</script>